import React, { memo } from 'react'
import styled from 'styled-components'
import classNames from 'classnames'
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min'

const tabbarItem = [
  {
    title: '首页',
    path: '/home',
  },
  {
    title: '分类',
    path: '/category',
  },
  {
    title: '购物车',
    path: '/shopping-cart',
  },
  {
    title: '我的',
    path: '/profile',
  },
]

function TabBar(props) {
  const history = useHistory()

  const skipPath = path => {
    history.push(path)
  }

  return (
    <TabBarWrapper className={classNames()}>
      {tabbarItem.map(item => (
        <li
          className="tabbar-item flex-center"
          key={item.title}
          onClick={() => {
            skipPath(item.path)
          }}>
          {item.title}
        </li>
      ))}
    </TabBarWrapper>
  )
}

export default memo(TabBar)

const TabBarWrapper = styled.ul`
  height: 49px;
  width: 100vw;
  display: flex;
  background: white;
  position: fixed;
  bottom: 0;

  .tabbar-item {
    flex: 1;
    text-decoration: none;
  }
`
